<template>
  <div class="container">
    <div>
      <span>医院</span>
    </div>
    <div class="level">
      <span>等级</span>
      <span
        @click="changeDegree(-1)"
        :class="formData.degree == -1 ? 'active' : ''"
        >全部</span
      >
      <span
        v-for="(item, index) in levelsArr"
        :key="index"
        :class="{ active: formData.degree == index }"
        @click="changeDegree(index)"
        >{{ item }}</span
      >
    </div>
    <div class="address">
      <span>地区</span>
      <span
        :class="formData.address == -1 ? 'active' : ''"
        @click="changeAddress(-1)"
        >全部</span
      >
      <span
        v-for="(item, index) in addressArr"
        :key="index"
        :class="{ active: formData.address == index }"
        @click="changeAddress(index)"
        >{{ item }}</span
      >
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, nextTick } from "vue";

const levelsArr = ref(["三级甲等", "三级乙等", "二级甲等", "二级乙等", "一级"]);
const addressArr = ref([
  "拱墅区",
  "滨江区",
  "上城区",
  "西湖区",
  "下城区",
  "萧山区",
]);

const formData = reactive({
  degree: localStorage.getItem("activelevel") || -1,
  address: localStorage.getItem("activeAddress") || -1,
});
const changeDegree = (index) => {
  formData.degree = index;
  localStorage.setItem("activeDegree", index);
};
const changeAddress = (index) => {
  formData.address = index;
  localStorage.setItem("activeAddress", index);
};
</script>
<style lang="less" scoped>
.active {
  color: #e49460;
}
.container {
  line-height: 2.3333rem;
  .level,
  .address {
    display: flex;
    color: #969696;
    span {
      margin-right: 0.9067rem;
      cursor: pointer;
    }
  }
}
</style>
